<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物商城</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B6B',
                        secondary: '#4ECDC4'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <!-- 使用 Flask 的 url_for 引入 CSS 文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body class="bg-gray-50">
<header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
    <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
        <div class="font-['Pacifico'] text-2xl text-primary">logo</div>
        <div class="flex-1 max-w-xl mx-8">
            <div class="relative">
                <label>
                    <input type="text" placeholder="搜索商品"
                           class="w-full h-10 pl-10 pr-4 rounded-full bg-gray-100 border-none focus:outline-none focus:ring-2 focus:ring-primary/20 text-sm">
                </label>
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>
        <nav class="flex items-center space-x-6">
            <a href="#" class="text-gray-600 hover:text-primary">首页</a>
            <a href="#" class="text-gray-600 hover:text-primary">分类</a>
            <a href="#" class="text-gray-600 hover:text-primary">新品</a>
            <a href="#" class="text-gray-600 hover:text-primary">特惠</a>
            <div class="relative">
                <i class="fas fa-shopping-cart text-xl text-gray-600 hover:text-primary"></i>
                <span class="absolute -top-2 -right-2 w-5 h-5 flex items-center justify-center bg-primary text-white text-xs rounded-full">3</span>
            </div>
        </nav>
    </div>
</header>

<main class="pt-16">
    <section class="hero-section h-[600px] relative flex items-center">
        <div class="max-w-7xl mx-auto px-4 w-full">
            <div class="max-w-xl text-white">
                <h1 class="text-5xl font-bold mb-6">夏季新品特惠</h1>
                <p class="text-xl mb-8">精选时尚单品，限时折扣高达 70% 起</p>
                <button class="bg-primary text-white px-8 py-3 !rounded-button text-lg font-medium hover:bg-primary/90 whitespace-nowrap">
                    立即选购
                </button>
            </div>
        </div>
    </section>

    <section class="max-w-7xl mx-auto px-4 py-16">
        <div class="grid grid-cols-4 gap-8">
            <div class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/ba2fc256d66344125eafb60a76bf6212.jpg"
                     class="w-full h-40 object-cover rounded-lg mb-4">
                <h3 class="text-lg font-medium mb-2">数码电子</h3>
            </div>
            <div class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/dc8386305f4625d7e4a08dfe16d3eba7.jpg"
                     class="w-full h-40 object-cover rounded-lg mb-4">
                <h3 class="text-lg font-medium mb-2">时尚服饰</h3>
            </div>
            <div class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/87aa3653bc1aeb6295740beab0fcfe30.jpg"
                     class="w-full h-40 object-cover rounded-lg mb-4">
                <h3 class="text-lg font-medium mb-2">家居生活</h3>
            </div>
            <div class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/dc2961102adeb47e4eb61a72c317de2c.jpg"
                     class="w-full h-40 object-cover rounded-lg mb-4">
                <h3 class="text-lg font-medium mb-2">美妆个护</h3>
            </div>
        </div>
    </section>
    <section class="max-w-7xl mx-auto px-4 py-16">
        <h2 class="text-2xl font-bold mb-8">热销商品</h2>
        <div class="grid grid-cols-4 gap-6">
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/ceb98206096ea0a517b03c8c14d55b61.jpg"
                     class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-medium mb-2">新款智能手机 Pro Max</h3>
                    <p class="text-gray-500 mb-2">6.7 英寸超视网膜屏幕</p>
                    <div class="flex items-center justify-between">
                        <span class="text-primary text-xl font-bold">¥6,999</span>
                        <button class="text-primary hover:bg-primary/10 p-2 !rounded-button whitespace-nowrap">
                            <i class="fas fa-shopping-cart"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/4fe6f38e70394c4cc51148cab593b6f0.jpg"
                     class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-medium mb-2">无线蓝牙耳机</h3>
                    <p class="text-gray-500 mb-2">主动降噪 持久续航</p>
                    <div class="flex items-center justify-between">
                        <span class="text-primary text-xl font-bold">¥999</span>
                        <button class="text-primary hover:bg-primary/10 p-2 !rounded-button whitespace-nowrap">
                            <i class="fas fa-shopping-cart"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/0903b2aa0523b14672cdb05d816d9548.jpg"
                     class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-medium mb-2">智能手表 Series 8</h3>
                    <p class="text-gray-500 mb-2">全天候健康监测</p>
                    <div class="flex items-center justify-between">
                        <span class="text-primary text-xl font-bold">¥2,999</span>
                        <button class="text-primary hover:bg-primary/10 p-2 !rounded-button whitespace-nowrap">
                            <i class="fas fa-shopping-cart"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/dbf94bcdb8173d878795abe3872b1f31.jpg"
                     class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-medium mb-2">平板电脑 Air</h3>
                    <p class="text-gray-500 mb-2">轻薄便携 性能强劲</p>
                    <div class="flex items-center justify-between">
                        <span class="text-primary text-xl font-bold">¥4,599</span>
                        <button class="text-primary hover:bg-primary/10 p-2 !rounded-button whitespace-nowrap">
                            <i class="fas fa-shopping-cart"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-2xl font-bold mb-8">限时特惠</h2>
            <div class="grid grid-cols-2 gap-8">
                <div class="relative overflow-hidden rounded-lg">
                    <img src="https://ai-public.mastergo.com/ai/img_res/edda192733c713fcb20ec4a6333f6e5d.jpg"
                         class="w-full h-80 object-cover">
                    <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                        <div class="text-center text-white">
                            <h3 class="text-2xl font-bold mb-4">夏季新品上市</h3>
                            <p class="mb-6">精选时尚单品 限时 8 折</p>
                            <button class="bg-white text-gray-900 px-6 py-2 !rounded-button hover:bg-gray-100 whitespace-nowrap">
                                立即抢购
                            </button>
                        </div>
                    </div>
                </div>
                <div class="relative overflow-hidden rounded-lg">
                    <img src="https://ai-public.mastergo.com/ai/img_res/f0f9468dc9cf2ee248d8254adaa9736b.jpg"
                         class="w-full h-80 object-cover">
                    <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                        <div class="text-center text-white">
                            <h3 class="text-2xl font-bold mb-4">数码专场</h3>
                            <p class="mb-6">品牌特惠 最高直降 1000</p>
                            <button class="bg-white text-gray-900 px-6 py-2 !rounded-button hover:bg-gray-100 whitespace-nowrap">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="max-w-7xl mx-auto px-4 py-16">
        <h2 class="text-2xl font-bold mb-8">新品推荐</h2>
        <div class="grid grid-cols-6 gap-6">
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/637aa257640bd197c13d7d54b8315a7f.jpg"
                     class="w-full h-40 object-cover">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-2">头戴式耳机</h3>
                    <p class="text-primary font-bold">¥399</p>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/5757a85b75f754ab75d535ab71d8aa73.jpg"
                     class="w-full h-40 object-cover">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-2">数码相机</h3>
                    <p class="text-primary font-bold">¥3,999</p>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/a42138238b219c4702d027fa1db88c4e.jpg"
                     class="w-full h-40 object-cover">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-2">智能音箱</h3>
                    <p class="text-primary font-bold">¥299</p>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/0de721fb2b221c1a524afa1c54f60362.jpg"
                     class="w-full h-40 object-cover">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-2">移动电源</h3>
                    <p class="text-primary font-bold">¥199</p>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/581b0128099076d791f8a3e7c7e5b76c.jpg"
                     class="w-full h-40 object-cover">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-2">智能家居</h3>
                    <p class="text-primary font-bold">¥599</p>
                </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://ai-public.mastergo.com/ai/img_res/52a2611d0899429abc55dd59df2c9bf7.jpg"
                     class="w-full h-40 object-cover">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-2">游戏配件</h3>
                    <p class="text-primary font-bold">¥499</p>
                </div>
            </div>
        </div>
    </section>
</main>

<footer class="bg-white border-t">
    <div class="max-w-7xl mx-auto px-4 py-12">
        <div class="grid grid-cols-4 gap-8">
            <div>
                <h3 class="font-bold mb-4">关于我们</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-primary">公司介绍</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">招贤纳士</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">联系我们</a></li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold mb-4">购物指南</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-primary">购物流程</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">支付方式</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">常见问题</a></li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold mb-4">配送服务</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-primary">配送范围</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">运费说明</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">验货与签收</a></li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold mb-4">售后服务</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-primary">退换货政策</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">退换货流程</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary">投诉与建议</a></li>
                </ul>
            </div>
        </div>
        <div class="mt-12 pt-8 border-t text-center text-gray-500">
            <p>© 2024 购物商城. All rights reserved.</p>
        </div>
    </div>
</footer>
</body>
</html>
